<template>
  <div class="Header-wrap">
    <div class="header flex">
      <div class="logo flex">
        <img src="../../assets/images/logo.png" alt="" />
        <p>省心物流</p>
      </div>
      <div class="user-info-wrap flex">
        <el-dropdown @command="handleCommand">
          <div class="user flex">
            <img :src="headImg" alt="" />
            <div class="username">{{ userInfo.name }}</div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">个人中心</el-dropdown-item>
            <el-dropdown-item command="1" divided @click="logout()"
              >退出</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <img class="msgImg" :src="msgImg" alt="" @click="gotoMsg()" />
      </div>
    </div>
  </div>
</template>

<script>
import msgImg from "../../assets/images/message/系统消息.png";
import headImg from "../../assets/images/userinfo/头像男 拷贝 4.png";
export default {
  data() {
    return {
      userInfo: {},
      msgImg,
      headImg,
      timeOut:null
    };
  },
  methods: {
    // 存储用户信息
    getUserInfo() {
      this.userInfo = this.$store.state.userInfo;
      console.log(this.userInfo);
    },
    // 点击下拉菜单(个人中心：0，退出：1)
    handleCommand(command) {
      if (command == 0) {
        this.$router.push("/personal");
      } else if (command == 1) {
        this.$message({
          message: "退出登录成功",
          type: "success",
        });
        clearInterval(this.timeOut);
        this.logout();
      }
    },
    // 退出
    logout() {
      sessionStorage.clear();
      this.$router.push("/login");
    },
    gotoMsg() {
      this.$router.push("/msg");
    },
    getNowTime() {
      this.timeOut = setInterval(() => {
        let nowTime = new Date();
        let time = new Date(
          nowTime.getTime() - +sessionStorage.getItem("loginTime")
        );
        let hour =
          Number(Math.floor(time / 3600000) < 10
            ? "0" + Math.floor(time / 3600000)
            : Math.floor(time / 3600000))
        let min =
          Number(Math.floor(time / 60000) < 10
            ? "0" + Math.floor(time / 60000)
            : Math.floor(time / 60000))
        let s = Number(
          Math.floor((time / 1000) % 60) < 10
            ? "0" + Math.floor((time / 1000) % 60)
            : Math.floor((time / 1000) % 60)
        );
      }, 1000);
    },
  },
  created() {
    // 获取用户的信息
    this.getUserInfo();
    this.getNowTime();
  },
};
</script>
 
<style lang="less" scoped>
.Header-wrap {
  height: 100%;
  .header {
    height: 100%;
    align-items: center;
    justify-content: space-between;
    .logo {
      height: 100%;
      align-items: center;
      img {
        height: 90%;
      }
      p {
        font-size: 30px;
        margin-left: 10px;
        color: #fff;
      }
    }
    .user-info-wrap {
      height: 100%;
      align-items: center;
      .el-dropdown {
        height: 100%;
        .user {
          height: 100%;
          align-items: center;
          img {
            height: 80%;
          }
          .username {
            margin-left: 10px;
            color: #fff;
            margin-right: 30px;
          }
        }
      }
      .msgImg {
        height: 60%;
        cursor: pointer;
      }
    }
  }
}
</style>